@use '../../common/styles/toolkit-ui-styles.scss' as ui;

.popup {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 1rem;
  background-color: var(--tk-background-color);
  color: var(--tk-text-color);
  gap: 1.25rem;

  .logo {
    align-self: center;
    @include ui.dark-mode {
      filter: drop-shadow(0px 0px 5px white);
    }
  }

  .status {
    text-align: center;
  }

  .actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;

    button {
      display: flex;
      gap: 0.5rem;
      align-items: center;
      justify-content: center;
      div {
        width: 130px;
      }
    }

    a {
      display: flex;
      text-decoration: none;

      button {
        flex-grow: 1;
      }
    }
  }

  .version {
    align-self: flex-end;
  }
}
